<template>
  <div class="app-container">
    <el-row style="width: 100%;height: 100%;margin: 0;" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%;padding-left: 0;">
        <div style="background-color: #FFFFFF;height: 100%;padding: 10px;">
          <el-input placeholder="输入关键字进行过滤" clearable size="mini" suffix-icon="el-icon-search"
                    style="width: 100%;" v-model="filterText"/>
          <div style="max-height:96%;min-height: 96%;overflow-y: auto;margin-top: 10px;" class="treeCont">
            <el-tree
              :default-expanded-keys="defaultExpandedKeys"
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="sheetsCode"
              highlight-current
              v-loading="treeLoading"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data}">
                <div class="custom-tree-node"
                     style="display: flex;justify-content: center;align-items: center;font-size: 14px;">
                  <span class="iconfont icon-a-jiafangzijianzhu icon-padding" v-if="data.deviceType === 0"></span>
                  <span class="iconfont icon-loudong icon-padding" v-if="data.deviceType === 1"></span>
                  <span class="iconfont icon-a-homezhuyefangzijia icon-padding" v-if="data.deviceType === 2"></span>
                  <span class="iconfont icon-dabiao icon-padding" v-if="data.deviceType !== 0 && data.deviceType !== 1 && data.deviceType !== 2"></span>
                  <span>{{ node.label }}</span>
                  <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span>
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-col>

      <!--大用户历史数据-->
      <el-col :span="20" style="height: 100%;background-color: #FFFFFF;">
        <div style="width: 100%;margin: 10px 5px 10px 0;">
          <el-row class="line-bottom" v-show="showSearch">
            <el-col class="form_col">
              <el-form :model="queryParams" ref="queryForm" size="mini" label-width="70px">
                <div id="searchFilter" style="display: flex; flex-wrap: wrap">
                  <el-form-item label="户号" prop="userId">
                    <el-input
                      v-model="queryParams.userId"
                      placeholder="请输入户号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="设备名称" prop="terminalName">
                    <el-input
                      v-model="queryParams.terminalName"
                      placeholder="请输入设备名称"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="设备编号" prop="terminalId">
                    <el-input
                      v-model="queryParams.terminalId"
                      placeholder="请输入设备编号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="出厂编号" prop="firstSupplierId">
                    <el-input
                      v-model="queryParams.firstSupplierId"
                      placeholder="请输入出厂编号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="IMEI" prop="imei" >
                    <el-input
                      v-model="queryParams.imei"
                      placeholder="请输入imei"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="通讯地址" prop="communicateAddress" >
                    <el-input
                      v-model="queryParams.communicateAddress"
                      placeholder="请输入通讯地址"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="注册平台" prop="signPlatform">
                    <el-select
                      v-model="queryParams.signPlatform"
                      placeholder="请选择注册平台"
                      clearable
                    >
                      <el-option v-for="dict in dict.type.sign_platform" :key="dict.value" :label="dict.label"
                                 :value="parseInt(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item></el-form-item>
                </div>
              </el-form>
            </el-col>
            <el-col class="form_query">
              <el-button size="mini" v-show="collapseAble" type="text" @click="shiftCollapseAble" class="text">
                      <span>
                        {{ fold ? '收起筛选' : '更多筛选' }}
                      </span>
              </el-button>
              <el-button type="primary" @click="handleQuery" size="mini">查询</el-button>
              <el-button @click="resetQuery" size="mini">重置</el-button>
              <RightDropdown :tableVisible="false" class="ml10" :queryVisible="false" :columns="columns" :showSearch.sync="showSearch" :cardModeVisible="true" :tableModeVisible="true" @queryTable="getList" :exportVisible="false" @changeCardMode="handleCardMode" @changeTableMode="handleTableMode"></RightDropdown>
            </el-col>
          </el-row>

<!--          <el-row :gutter="10" class="mb8">-->
<!--            -->
<!--          </el-row>-->
          <!-- 第一张表 -->
          <transition
            enter-active-class="animated fadeInUp tableIn"
            leave-active-class="animated fadeOutUp tableOut">
            <div v-show="mode === 'card'">
              <div class="cardBox" :style="{height: getAvailableHeight + 'px'}">
                <div class="cardlist" v-for="(item, index) in data" :key="index">
                  <el-card style="width: 315px; float: left;">
                    <div class="card_content">
                      <el-row style="height: 70px;">
                        <el-col :span="20">
                          <el-row class="name">
<!--                            <el-tooltip :content="item.terminalName" placement="top" effect="dark">-->
                              {{item.terminalName}}
<!--                            </el-tooltip>-->
                          </el-row>
                          <el-row class="date">{{ moment(item.readDate).format("yyyy-MM-DD HH:mm:ss") }}</el-row>
                        </el-col>
                        <el-col :span="4" class="detail"><div @click="detailClick(item)">详情</div></el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12" class="pressure_name">压力值</el-col>
                        <el-col :span="12" class="pressure_num"><span style="color: #1890ff;">{{ item.pressure }} &nbsp;&nbsp;</span>MPa</el-col>
                      </el-row>

                    </div>
                  </el-card>
                </div>
              </div>
              <pagination
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </transition>
          <transition
            enter-active-class="animated fadeInUp tableIn"
            leave-active-class="animated fadeOutUp tableOut">
            <div v-show="mode === 'table'">
              <el-table v-loading="tableLoading" :data="data" border highlight-current-row :height="getAvailableHeight" ref="monthTable">
                <el-table-column label="设备名称" align="center" prop="terminalName" :show-overflow-tooltip="true" v-if="columns[0].visible" width="150" fixed="left"/>
                <el-table-column label="更新时间" align="center" prop="readDate" :show-overflow-tooltip="true" v-if="columns[1].visible" width="160"/>
                <el-table-column label="出厂编号" align="center" prop="firstSupplierId" :show-overflow-tooltip="true" v-if="columns[2].visible" width="130"/>
                <el-table-column label="户号" align="center" prop="userId" :show-overflow-tooltip="true" v-if="columns[3].visible" width="130"/>
                <el-table-column label="口径大小" align="center" prop="caliber" :show-overflow-tooltip="true" width="140" v-if="columns[4].visible">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.ldbd_pipe_caliber" :value="scope.row.caliber"/>
                  </template>
                </el-table-column>
                <el-table-column label="通讯地址" align="center" prop="communicateAddress" :show-overflow-tooltip="true" width="140" v-if="columns[5].visible"/>
                <el-table-column label="IMEI" align="center" prop="imei" :show-overflow-tooltip="true" width="130" v-if="columns[6].visible"/>
                <el-table-column label="总流量(m³)" align="center" prop="totalFlow" :show-overflow-tooltip="true" width="140" v-if="columns[7].visible"/>
                <el-table-column label="正向流量(m³)" align="center" prop="readNumber" :show-overflow-tooltip="true" width="140" v-if="columns[8].visible"></el-table-column>
                <el-table-column label="反向流量(m³)" align="center" prop="reverseNumber" :show-overflow-tooltip="true" width="140" v-if="columns[9].visible"></el-table-column>
                <el-table-column label="管网压力(MPa)" align="center" prop="pressure" :show-overflow-tooltip="true" width="140" v-if="columns[10].visible"></el-table-column>
<!--                <el-table-column label="转换器电压(%)" align="center" prop="imei" :show-overflow-tooltip="true" width="150"></el-table-column>-->
                <el-table-column label="终端电压(V)" align="center" prop="terminalVol" :show-overflow-tooltip="true" width="120" v-if="columns[11].visible"></el-table-column>
                <el-table-column label="户名" align="center" prop="deptName" :show-overflow-tooltip="true" v-if="columns[12].visible" width="120"></el-table-column>
<!--                <el-table-column label="区域" align="center" prop="sheetsName" :show-overflow-tooltip="true" v-if="columns[13].visible"></el-table-column>-->
                <el-table-column label="平台类型" align="center" prop="signPlatform" :show-overflow-tooltip="true" v-if="columns[14].visible" width="120">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sign_platform" :value="scope.row.signPlatform"/>
                  </template>
                </el-table-column>
<!--                <el-table-column label="预警操作" align="center" prop="warnParamType" :show-overflow-tooltip="true" v-if="columns[15].visible">-->
<!--                  <template slot-scope="scope">-->
<!--                    <dict-tag :options="dict.type.warnparamtype" :value="scope.row.warnParamType"/>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </el-table>
              <pagination
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import {listTerminalsDbTree} from "@/api/record/terminalsdb";
import { widwidth, widheight } from '@/utils/getClient.js'
import { getPressureWatchList } from '@/api/datastatistics/terminals/dosageStatics.js'
export default {
  name: "pressureKeep",
  dicts: ['sign_platform','warnparamtype','ldbd_pipe_caliber'],
  data() {
    return {
      // 当前数据展示模式
      mode: 'card',
      // 表格数据总数
      total: 0,
      // 表格加载状态
      tableLoading: false,
      // 区域树选项
      sheetsTreeList: [],
      defaultExpandedKeys: [],
      screenHeight: null,
      size: 'mini',
      collapseAble: false,
      fold: false,
      maxShow: 4,
      labelWidth: '70px',
      defaultProps: {
        children: "children",
        label: "sheetsName",
      },
      // 遮罩层
      treeLoading: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        terminalId: '',
        sheetsCode: '',
        userId: '',
        terminalName: '',
        firstSupplierId: '',
        imei: '',
        communicateAddress: '',
        signPlatform: '',
      },
      columns:[
        {key: 0, label: `设备名称`, visible: true},
        {key: 1, label: `更新时间`, visible: true},
        {key: 2, label: `出厂编号`, visible: true},
        {key: 3, label: `户号`, visible: true},
        {key: 4, label: `口径大小`, visible: true},
        {key: 5, label: `通讯地址`, visible: true},
        {key: 6, label: `IMEI`, visible: true},
        {key: 7, label: `总流量(m³)`, visible: true},
        {key: 8, label: `正向流量(m³)`, visible: true},
        {key: 9, label: `反向流量(m³)`, visible: true},
        {key: 10, label: `管网压力(MPa)`, visible: true},
        {key: 11, label: `终端电压(V)`, visible: true},
        {key: 12, label: `户名`, visible: true},
        {key: 13, label: `区域`, visible: true},
        {key: 14, label: `平台类型`, visible: true},
        {key: 15, label: `预警操作`, visible: true}
      ],
      filterText: '',
      data: [],
      moment,
      form: {},
      visible: false,
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
    this.getTreeList();
  },
  computed: {
    getAvailableHeight() {
      // return this.screenHeight - (this.showSearch ? 205 : (this.fold ? 200 : 255))
      return this.screenHeight - (this.fold ? 252 : 224)
    },
  },
  mounted() {
    this.getList()
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
  },
  watch: {
    // 根据名称筛选区域树
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 点击卡片
    detailClick(item) {
      this.$router.push({
        name: 'HistoryDb',
        params: {
          locationNb: item.locationNb,
          tid: item.id,
          terminalId: item.terminalId
        }
      })
    },
    // 切换为卡片模式
    handleCardMode() {
      this.mode = 'card'
    },
    // 切换为表格模式
    handleTableMode() {
      this.mode = 'table'
    },
    getList() {
      this.tableLoading = true
      getPressureWatchList(this.queryParams).then(response => {
        if(response.code === 200) {
          this.data = response.rows
          this.total = response.total
          this.tableLoading = false
        }else {
          this.data = []
          this.tableLoading = false
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置表单
    resetQuery() {
      this.$refs.tree.setCurrentKey(null);
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        terminalId: '',
        sheetsCode: '',
        userId: '',
        terminalName: '',
        firstSupplierId: '',
        imei: '',
        communicateAddress: '',
        signPlatform: '',
      }
      this.handleQuery()
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },

    /** 查询区域下拉树结构 */
    getTreeList() {
      this.treeLoading = true;
      this.sheetsTreeList = JSON.parse(localStorage.getItem('terminalTreeData'))
      if(this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      }else {
        this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
        this.treeLoading = false;
      }
    },
    handleNodeClick(node){
      this.queryParams.sheetsCode = node.sheetsCode + ','
      if(node.children.length > 0){
        this.copyTree(node.children)
      }
      this.queryParams.sheetsCode = this.queryParams.sheetsCode.substr(0, this.queryParams.sheetsCode.length - 1)
      this.handleQuery()
    },
    copyTree(list) {
      list.forEach((item) => {
        this.queryParams.sheetsCode += item.sheetsCode + ','
        if (item.children && item.children.length > 0) {
          this.copyTree(item.children);
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node{
    width: fit-content;
    //min-width: var(--treeWidth);
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}
// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url('../../../assets/images/jia.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url('../../../assets/images/jian.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px ;
    font-size: 20px;
    background-size: 100% 100%;
  }
}

.cardBox {
  width: 100%;
  height: auto;
  overflow: auto;
  //border-top: 1px solid #e8e8e8;
  .cardlist{
    margin: 10px 15px;
    display: flex;
    float: left;
    position: relative;
    .card_content{
      .detail{
        color: #1890ff;
        cursor: pointer;
        text-align: right;
        font-size: 14px;
      }
      .name {
        margin-bottom: 10px;
        // font-weight: bold;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .date {
        font-size: 12px;
        font-weight: 500;
        color: #969696;
      }
      .pressure_name{
        text-align: left;
        font-size: 14px;
        color: #646464;
      }
      .pressure_num{
        text-align: right;
        font-size: 14px;
        color: #646464;
      }
    }
  }

  .el-card{
    background: #e6f7ff;
    border-radius: 10px;
  }
}
::v-deep .el-table__fixed {
  height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
  bottom: 5px; // 固定列默认设置了定位，
}
</style>
